<template>
  <div class="app_main">
    <div class="search_box">
      <el-form ref="searchForm" :inline="true" :model="searchForm" size="mini">
        <search-form-box :show-more-btn="false">
          <template slot="showSearch">
            <el-form-item label="分类名称" prop="name">
              <el-input v-model="searchForm.name" placeholder="请输入分类名称" clearable/>
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button size="mini" type="primary" plain @click="search">查询</el-button>
              <el-button size="mini" type="info" plain @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <el-row style="margin-bottom: 10px">
      <el-button size="mini" type="primary" @click="add">新增分类</el-button>
    </el-row>
    <div class="data_box">
      <el-table v-loading="tableLoading" :data="tableData" stripe border size="mini">
        <el-table-column fixed="left" width="50" type="index" label="序号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" min-width="100" prop="name" align="center"/>
        <el-table-column label="价格（元）" min-width="100" prop="price" align="center"></el-table-column>
        <el-table-column label="媒体类型名称" min-width="100" prop="media_type_name" align="center"/>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button-group>
              <el-button icon="el-icon-edit" type="primary" size="mini" @click="editRow(scope.row)">修改</el-button>
              <el-button icon="el-icon-delete" type="danger" size="mini" @click="remove(scope.row.id)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="searchForm.page"
      :page-sizes="[10,20,50,100, 200, 400]"
      :page-size.sync="searchForm.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog :title="edit ? '修改分类' : '新增分类'" :visible.sync="cuFormDialogVisible" width="30%" center
               @close="closeCuFormDialog"
    >
      <el-form ref="cuForm" :model="cuForm" size="mini" :rules="rules" label-width="140px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="cuForm.name" placeholder="请输入分类名称"/>
        </el-form-item>
        <el-form-item label="关联媒体类型" prop="media_type_pid">
          <el-select v-model="cuForm.media_type_pid" style="width: 100%" clearable placeholder="请选择媒体类型">
            <el-option v-for="(item,index) in mediaTypeArr" :key="index" :value="item.id" :label="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="cuForm.price" type="number" step="0.01" placeholder="请输入价格"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cuFormDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import { all } from '@/api/system/media_type'
import { save, edit, remove, page } from '@/api/system/media_type_classification'
import common from '@/utils/common'

export default {
  name: 'MediaTypeClassification',
  components: { SearchFormBox },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      listParams: {
        name: null,
        page_size: 10,
        page: 1
      },
      searchForm: {
        name: null,
        page_size: 10,
        page: 1
      },
      edit: false,
      cuFormDialogVisible: false,
      cuForm: {
        id: null,
        name: null,
        price: null,
        media_type_pid: null
      },
      rules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
        media_type_pid: [
          { required: true, message: '请选择关联的媒体类型', trigger: 'change' }
        ]
      },
      total: 0,
      mediaTypeArr: []
    }
  },
  created() {
    this.getList()
    this.getMediaTypeArr()
  },
  methods: {
    getList() {
      this.tableLoading = true
      page(this.listParams).then(res => {
        this.tableLoading = false
        this.total = res.data.total
        this.tableData = res.data.records.map(item => {
          if (item.media_type_name === null) {
            item.media_type_name = '全部'
          }
          return item
        })
      }).catch(() => {
        this.tableLoading = false
      })
    },
    search() {
      this.searchForm.page = 1
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    async remove(id) {
      let flag = await common.confirmDialog('您确定删除吗')
      if (flag) {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        remove({ id }).then(res => {
          this.$message.success('操作成功')
          loading.close()
          this.getList()
        }).catch(() => {
          loading.close()
        })
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    add() {
      this.cuFormDialogVisible = true
    },
    editRow(row) {
      this.cuFormDialogVisible = true
      this.edit = true
      this.cuForm = Object.assign({}, row)
    },
    submit() {
      this.$refs.cuForm.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          if (this.edit) {
            edit(this.cuForm).then(res => {
              if (res.data) {
                this.$message.success('操作成功')
              }
              this.cuFormDialogVisible = false
              this.getList()
              this.getMediaTypeArr()
              loading.close()
            }).catch(() => {
              loading.close()
            })
          } else {
            save(this.cuForm).then(res => {
              if (res.data) {
                this.$message.success('操作成功')
              }
              this.getList()
              this.getMediaTypeArr()
              loading.close()
              this.cuFormDialogVisible = false
            }).catch(() => {
              loading.close()
            })
          }
        }
      })
    },
    closeCuFormDialog() {
      this.cuForm = {
        id: null,
        name: null,
        media_type_pid: null
      }
      this.edit = false
      this.$nextTick(() => {
        this.$refs.cuForm.clearValidate()
      })
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    getMediaTypeArr() {
      all().then(res => {
        this.mediaTypeArr = res.data
        this.mediaTypeArr.unshift({ id: 0, name: '全部' })
      })
    }
  }
}
</script>

<style scoped>
.app_main {
  padding: 20px 20px 0 20px;
}
</style>
